<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="报名"></Header>
		<view class="wapper">
			<!-- 轮播图 -->
			<view class="banner">
				<u-swiper :list="bannerList" height="197" mode="dot"></u-swiper>
			</view>
			<!-- form -->
			<view class="items">
				<view class="item" v-for="(v,k) in items" :key="k" @click="routerTo(v.src)">
					<view class="item_icon">
						<image :src="v.url" mode="widthFix"></image>
					</view>
					<view class="item_text">
						{{v.title}}
					</view>
				</view>
			</view>
			<!-- btm -->
			<view class="bottom">
				<image src="../../static/icons/btn2.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	import icon1 from '@/static/icons/icon1.png'
	import icon2 from '@/static/icons/icon2.png'
	import btn from '@/static/icons/btn.png'

	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				bannerList: [
					banner1
				],
				items: [{
						title: '参会报名',
						url: icon1,
						src: '/pages/proces/regist2'
					},
					// {
					// 	title: '参展报名',
					// 	url: icon2,
					// 	src: '/pages/proces/regist'
					// },
				]
			}
		},
		methods: {
			routerTo(src) {
				uni.navigateTo({
					url: src
				})
			}
		},
		onReady() {},
		async created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom

		},
		async mounted() {
			
		}
	}
</script>
<style>
	u-row {
		width: 100% !important;
	}
</style>
<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		background: #f2f2f2;

		.wapper {
			flex: 1;
			z-index: 100;
			margin-top: -280rpx;
			// padding-bottom: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.banner {
				border-top-left-radius: 60rpx;
				border-top-right-radius: 60rpx;
				overflow: hidden;
			}

			.items {
				display: flex;
				padding: 32rpx 20rpx;
				justify-content: center;

				.item {
					width: 281rpx;
					padding: 32rpx;
					height: 281rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.35);
					border-radius: 33rpx;
					display: flex;
					flex-direction: column;
					text-align: center;

					.item_icon {
						// padding: 40rpx;
						height: 140rpx;
						padding-bottom: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 1px solid #000;

						image {
							width: 120rpx;
						}
					}

					.item_text {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
					}
				}
			}

			.bottom {
				background: linear-gradient(45deg,#124ba8,#009fe8);
				image {
					width: 100%;
					height: 385rpx;
					position: relative;
					top: 20rpx;
				}
			}
		}
	}
</style>